<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的播放列表 - 局域网视频学习系统</title>
    <link rel="stylesheet" href="../css/common.css">
    <style>
        .playlists-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        .page-header {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: var(--shadow);
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .page-title {
            font-size: 24px;
            font-weight: bold;
            color: var(--neutral-dark);
            margin-bottom: 8px;
        }

        .page-subtitle {
            color: #666;
            font-size: 14px;
        }

        .create-playlist-btn {
            background: var(--primary-color);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            transition: background 0.3s ease;
        }

        .create-playlist-btn:hover {
            background: #1e5f7a;
        }

        .playlists-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
        }

        .playlist-card {
            background: white;
            border-radius: 8px;
            box-shadow: var(--shadow);
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .playlist-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        .playlist-header {
            padding: 16px;
            border-bottom: 1px solid var(--border-color);
        }

        .playlist-name {
            font-size: 18px;
            font-weight: 600;
            color: var(--neutral-dark);
            margin-bottom: 8px;
        }

        .playlist-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
            color: #666;
        }

        .playlist-description {
            padding: 16px;
            font-size: 14px;
            color: #666;
            line-height: 1.5;
            min-height: 60px;
        }

        .playlist-actions {
            padding: 16px;
            border-top: 1px solid var(--border-color);
            display: flex;
            gap: 8px;
        }

        .playlist-btn {
            flex: 1;
            padding: 8px 12px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            transition: background 0.3s ease;
        }

        .playlist-btn.primary {
            background: var(--primary-color);
            color: white;
        }

        .playlist-btn.primary:hover {
            background: #1e5f7a;
        }

        .playlist-btn.secondary {
            background: #f5f5f5;
            color: #666;
        }

        .playlist-btn.secondary:hover {
            background: #e0e0e0;
        }

        .playlist-btn.danger {
            background: #ffebee;
            color: #d32f2f;
        }

        .playlist-btn.danger:hover {
            background: #ffcdd2;
        }

        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: #666;
        }

        .empty-state i {
            font-size: 64px;
            margin-bottom: 16px;
            opacity: 0.5;
        }

        .empty-state h3 {
            font-size: 18px;
            margin-bottom: 8px;
            color: var(--neutral-dark);
        }

        .empty-state p {
            font-size: 14px;
            margin-bottom: 20px;
        }

        .loading {
            text-align: center;
            padding: 40px;
            color: #666;
        }

        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
        }

        .modal-content {
            background-color: white;
            margin: 5% auto;
            padding: 20px;
            border-radius: 8px;
            width: 90%;
            max-width: 500px;
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .modal-title {
            font-size: 18px;
            font-weight: 600;
            color: var(--neutral-dark);
        }

        .close {
            color: #aaa;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }

        .close:hover {
            color: #000;
        }

        .form-group {
            margin-bottom: 16px;
        }

        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: var(--neutral-dark);
        }

        .form-input {
            width: 100%;
            padding: 10px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            font-size: 14px;
        }

        .form-input:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px rgba(46, 134, 171, 0.2);
        }

        .form-textarea {
            min-height: 80px;
            resize: vertical;
        }

        .form-actions {
            display: flex;
            gap: 12px;
            justify-content: flex-end;
        }

        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: background 0.3s ease;
        }

        .btn-primary {
            background: var(--primary-color);
            color: white;
        }

        .btn-primary:hover {
            background: #1e5f7a;
        }

        .btn-secondary {
            background: #f5f5f5;
            color: #666;
        }

        .btn-secondary:hover {
            background: #e0e0e0;
        }

        .public-badge {
            display: inline-block;
            padding: 2px 8px;
            background: #4caf50;
            color: white;
            border-radius: 12px;
            font-size: 10px;
            font-weight: 600;
            text-transform: uppercase;
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <nav class="navbar">
        <div class="container-fluid">
            <div style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
                <a href="index.html" class="navbar-brand">
                    📚 局域网视频学习系统
                </a>
                <div style="display: flex; align-items: center; gap: 20px;">
                    <a href="index.html" style="color: var(--neutral-dark); text-decoration: none;">
                        🏠 首页
                    </a>
                    <a href="favorites.html" style="color: var(--neutral-dark); text-decoration: none;">
                        ❤️ 我的收藏
                    </a>
                    <a href="playlists.html" style="color: var(--neutral-dark); text-decoration: none;">
                        📋 播放列表
                    </a>
                    <a href="exams.html" style="color: var(--neutral-dark); text-decoration: none;">
                        📝 考试中心
                    </a>
                    <a href="profile.html" style="color: var(--neutral-dark); text-decoration: none;">
                        👤 个人资料
                    </a>
                    <span style="color: var(--neutral-dark);">
                        <span data-user-name>学生</span>
                    </span>
                    <button onclick="logout()" class="logout-btn">
                        退出登录
                    </button>
                </div>
            </div>
        </div>
    </nav>

    <div class="container">

        <div class="playlists-container">
            <!-- 页面头部 -->
            <div class="page-header">
                <div>
                    <div class="page-title">我的播放列表</div>
                    <div class="page-subtitle">管理您的视频播放列表</div>
                </div>
                <button class="create-playlist-btn" onclick="showCreateModal()">
                    ➕ 创建播放列表
                </button>
            </div>

            <!-- 播放列表列表 -->
            <div id="playlistsContent">
                <div class="loading">
                    <div class="loading-pulse" style="margin-bottom: 12px;"></div>
                    <p>加载播放列表...</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 创建/编辑播放列表模态框 -->
    <div id="playlistModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title" id="modalTitle">创建播放列表</div>
                <span class="close" onclick="hideModal()">&times;</span>
            </div>
            <form id="playlistForm">
                <div class="form-group">
                    <label class="form-label" for="playlistName">播放列表名称 *</label>
                    <input type="text" id="playlistName" class="form-input" required>
                </div>
                <div class="form-group">
                    <label class="form-label" for="playlistDescription">描述</label>
                    <textarea id="playlistDescription" class="form-input form-textarea" placeholder="描述这个播放列表的内容..."></textarea>
                </div>
                <div class="form-group">
                    <label class="form-label">
                        <input type="checkbox" id="isPublic"> 公开播放列表
                    </label>
                </div>
                <div class="form-actions">
                    <button type="button" class="btn btn-secondary" onclick="hideModal()">取消</button>
                    <button type="submit" class="btn btn-primary">保存</button>
                </div>
            </form>
        </div>
    </div>

    <script src="../js/common.js"></script>
    <script>
        let playlists = [];
        let editingPlaylist = null;

        // 页面初始化
        document.addEventListener('DOMContentLoaded', function() {
            loadPlaylists();
            
            // 绑定表单提交事件
            document.getElementById('playlistForm').addEventListener('submit', handleFormSubmit);
        });

        // 加载播放列表
        async function loadPlaylists() {
            try {
                const userId = UserManager.getUserId();
                const response = await API.get(`/playlist/user/${userId}`);
                
                if (response.success) {
                    playlists = response.playlists || [];
                    renderPlaylists();
                } else {
                    showError('加载播放列表失败');
                }
            } catch (error) {
                console.error('加载播放列表失败:', error);
                showError('加载播放列表失败，请稍后重试');
            }
        }

        // 渲染播放列表
        function renderPlaylists() {
            const container = document.getElementById('playlistsContent');
            
            if (playlists.length === 0) {
                container.innerHTML = `
                    <div class="empty-state">
                        <i>📋</i>
                        <h3>暂无播放列表</h3>
                        <p>创建您的第一个播放列表来组织视频</p>
                        <button class="btn btn-primary" onclick="showCreateModal()">创建播放列表</button>
                    </div>
                `;
                return;
            }

            container.innerHTML = `
                <div class="playlists-grid">
                    ${playlists.map(playlist => `
                        <div class="playlist-card">
                            <div class="playlist-header">
                                <div class="playlist-name">
                                    ${playlist.name}
                                    ${playlist.isPublic ? '<span class="public-badge">公开</span>' : ''}
                                </div>
                                <div class="playlist-meta">
                                    <span>${playlist.videoCount || 0} 个视频</span>
                                    <span>${Utils.formatTime(playlist.updatedTime)}</span>
                                </div>
                            </div>
                            <div class="playlist-description">
                                ${playlist.description || '暂无描述'}
                            </div>
                            <div class="playlist-actions">
                                <button class="playlist-btn primary" onclick="viewPlaylist(${playlist.id})">
                                    查看
                                </button>
                                <button class="playlist-btn secondary" onclick="editPlaylist(${playlist.id})">
                                    编辑
                                </button>
                                <button class="playlist-btn danger" onclick="deletePlaylist(${playlist.id})">
                                    删除
                                </button>
                            </div>
                        </div>
                    `).join('')}
                </div>
            `;
        }

        // 显示创建模态框
        function showCreateModal() {
            editingPlaylist = null;
            document.getElementById('modalTitle').textContent = '创建播放列表';
            document.getElementById('playlistForm').reset();
            document.getElementById('playlistModal').style.display = 'block';
        }

        // 编辑播放列表
        function editPlaylist(playlistId) {
            const playlist = playlists.find(p => p.id === playlistId);
            if (!playlist) return;
            
            editingPlaylist = playlist;
            document.getElementById('modalTitle').textContent = '编辑播放列表';
            document.getElementById('playlistName').value = playlist.name;
            document.getElementById('playlistDescription').value = playlist.description || '';
            document.getElementById('isPublic').checked = playlist.isPublic || false;
            document.getElementById('playlistModal').style.display = 'block';
        }

        // 隐藏模态框
        function hideModal() {
            document.getElementById('playlistModal').style.display = 'none';
            editingPlaylist = null;
        }

        // 处理表单提交
        async function handleFormSubmit(e) {
            e.preventDefault();
            
            const name = document.getElementById('playlistName').value.trim();
            const description = document.getElementById('playlistDescription').value.trim();
            const isPublic = document.getElementById('isPublic').checked;
            
            if (!name) {
                Message.warning('请输入播放列表名称');
                return;
            }
            
            try {
                const playlistData = {
                    name: name,
                    description: description,
                    isPublic: isPublic
                };
                
                let response;
                if (editingPlaylist) {
                    playlistData.id = editingPlaylist.id;
                    response = await API.put('/playlist/update', playlistData);
                } else {
                    response = await API.post('/playlist/create', playlistData);
                }
                
                if (response.success) {
                    Message.success(response.message);
                    hideModal();
                    loadPlaylists();
                } else {
                    Message.error(response.message);
                }
            } catch (error) {
                console.error('保存播放列表失败:', error);
                Message.error('保存失败，请稍后重试');
            }
        }

        // 查看播放列表
        function viewPlaylist(playlistId) {
            window.location.href = `playlist-detail.html?id=${playlistId}`;
        }

        // 删除播放列表
        async function deletePlaylist(playlistId) {
            const playlist = playlists.find(p => p.id === playlistId);
            if (!playlist) return;
            
            if (!confirm(`确定要删除播放列表"${playlist.name}"吗？\n删除后无法恢复。`)) return;
            
            try {
                const response = await API.delete(`/playlist/${playlistId}`);
                
                if (response.success) {
                    Message.success('播放列表删除成功');
                    loadPlaylists();
                } else {
                    Message.error(response.message);
                }
            } catch (error) {
                console.error('删除播放列表失败:', error);
                Message.error('删除失败，请稍后重试');
            }
        }

        // 显示错误信息
        function showError(message) {
            const container = document.getElementById('playlistsContent');
            container.innerHTML = `
                <div class="empty-state">
                    <i>❌</i>
                    <h3>加载失败</h3>
                    <p>${message}</p>
                    <button class="btn btn-primary" onclick="loadPlaylists()">重新加载</button>
                </div>
            `;
        }

        // 点击模态框外部关闭
        window.onclick = function(event) {
            const modal = document.getElementById('playlistModal');
            if (event.target === modal) {
                hideModal();
            }
        }

        // 退出登录
        async function logout() {
            if (confirm('确定要退出登录吗？')) {
                try {
                    UserManager.logout();
                    window.location.href = '../login.html';
                } catch (error) {
                    console.error('退出登录失败:', error);
                    Message.error('退出登录失败');
                }
            }
        }
    </script>
</body>
</html>
